﻿<template>
  <info-card title="物流信息">
    <el-form ref="logisticalRef" :model="logisticalForm" :rules="formRule" label-width="auto">
      <el-form-item label="发货邮费" prop="deliveryPostage">
        <el-radio-group v-model="logisticalForm.deliveryPostage">
          <el-radio
            v-for="item in getConfig('qingyun.product.delivery.postage.type')"
            :key="item.dictValue"
            :value="item.dictValue"
          >
            {{ item.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发货地区" prop="areaList">
        <el-cascader
          placeholder="请选择省市区"
          ref="cascaderRef"
          v-model="logisticalForm.areaList"
          :options="areaData"
          :style="{ width: '430px' }"
          :props="{ label: 'text' }"
        />
      </el-form-item>
      <el-form-item label="归还邮费" prop="returnPostage">
        <el-radio-group v-model="logisticalForm.returnPostage">
          <el-radio
            v-for="item in getConfig('qingyun.product.return.postage.type')"
            :key="item.dictValue"
            :value="item.dictValue"
          >
            {{ item.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="归还地址" prop="returnAddressIdList">
        <el-button class="add-btn" @click="handleOpenModal('add')">添加地址</el-button>
        <el-table
          :data="addressData"
          style="width: 100%; margin-top: 12px"
          show-overflow-tooltip
          :header-cell-style="{ 'background-color': 'var(--fl1)' }"
          row-key="id"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column prop="name" label="收货人" width="auto" align="center" min-width="25%" />
          <el-table-column label="收货地址" width="auto" align="center" min-width="25%">
            <template #default="scope">
              {{ `${scope.row.provinceName}${scope.row.cityName}${scope.row.areaName}${scope.row.street}` }}
            </template>
          </el-table-column>
          <el-table-column prop="telephone" label="手机号码" width="auto" align="center" min-width="25%" />
          <el-table-column prop="createTime" label="添加时间" width="auto" align="center" min-width="25%" />
          <template #empty>
            <base-empty description="暂无数据" />
          </template>
        </el-table>
        <div class="page-content">
          <el-pagination
            v-if="total > addressData.length"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="searchParams.pageSize"
            @current-change="handleCurrentChange"
            v-model:current-page="searchParams.pageNumber"
          />
        </div>
      </el-form-item>
    </el-form>
    <!-- 新增地址 -->
    <address-operate
      :visble="addressVisble"
      :modal-type="operateType"
      :area-data="areaData"
      :current-type="2"
      @hide="handleHideModal"
    />
  </info-card>
</template>

<script setup>
  import infoCard from "./InfoCard.vue";
  import AddressOperate from "../AddressOperate.vue";

  // 获取配置选项
  const getConfig = inject("getConfig");
  // 表单Ref
  const logisticalRef = ref();
  // 表单
  const logisticalForm = ref({ deliveryPostage: "", areaList: [], returnPostage: "", returnAddressIdList: [] });
  // 表单规则
  const formRule = reactive({
    deliveryPostage: [{ required: true, message: "请选择发货邮费", trigger: "blur" }],
    areaList: [{ required: true, message: "请选择发货地区", trigger: "blur" }],
    returnPostage: [{ required: true, message: "请选择归还邮费", trigger: "blur" }],
    returnAddressIdList: [{ required: true, message: "请选择归还地址", trigger: "blur" }],
  });
  // 省市区ref
  const cascaderRef = ref();
  // 省市区数据
  const areaData = ref([]);
  // 弹窗显示隐藏
  const addressVisble = ref(false);
  // 弹窗类型
  const operateType = ref("");
  // 地址数据
  const addressData = ref([]);
  // 地址搜索参数
  const searchParams = ref({
    pageNumber: 1,
    pageSize: 10,
    type: 2,
  });
  // 总数
  const total = ref(0);
  // 表格加载
  const loading = ref(false);
  // 选择列表
  const selectList = ref([]);
  // 初始化
  onMounted(() => {
    loadAreaList();
    loadAddressData();
  });
  // 获取地区数据
  const loadAreaList = () => {
    loading.value = true;
    Api.common.getAreaData().then(res => {
      loading.value = false;
      areaData.value = res.data;
    });
  };
  // 获取地址数据
  const loadAddressData = () => {
    Api.product.getAddressList({ ...searchParams.value }).then(res => {
      addressData.value = res.data.records;
      total.value = res.data.total;
      //       nextTick(() => {
      //   if (props.checkList.length) {
      //     props.checkList.forEach(item => {
      //       serviceTableRef.value.toggleRowSelection(item);
      //     });
      //   }
      // });
    });
  };
  // 翻页
  const handleCurrentChange = page => {
    searchParams.value = { ...searchParams.value, pageNumber: page };
    nextTick(() => {
      loadAddressData();
    });
  };
  // 选择
  const handleSelectionChange = val => {
    selectList.value = val;
    logisticalForm.value.returnAddressIdList = val;
    console.warn(val);
  };
  // 打开弹窗
  const handleOpenModal = (type, info) => {
    operateType.value = type;
    addressVisble.value = true;
  };
  // 关闭弹窗
  const handleHideModal = refresh => {
    operateType.value = "";
    addressVisble.value = false;
    if (refresh) {
      loadAddressData();
    }
  };
  // 表单验证
  const formVerify = () => {
    return logisticalRef.value.validate();
  };
  // 获取处理后的表单内容
  const getDealParams = () => {
    const areaLabel = cascaderRef.value.getCheckedNodes()[0].pathLabels;
    const params = {
      deliveryPostage: logisticalForm.value.deliveryPostage,
      returnPostage: logisticalForm.value.returnPostage,
      provinceId: logisticalForm.value.areaList[0],
      cityId: logisticalForm.value.areaList[1],
      areaId: logisticalForm.value.areaList[2],
      provinceName: areaLabel[0],
      cityName: areaLabel[1],
      areaName: areaLabel[2],
      returnAddressIdList: logisticalForm.value.returnAddressIdList.map(el => el.id),
    };
    return params;
  };
  // 暴露方法
  defineExpose({
    formVerify,
    getDealParams,
  });
</script>

<style lang="scss" scoped>
  .add-btn {
    border: 1px solid var(--bd3);
    color: var(--bd3);
    margin-left: 8px;
  }
  .page-content {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
  }
</style>
